<template>
	<view>
		<scroll-view scroll-y class="page">
			<!-- 头部 -->
			<cu-custom bgColor="bg-rgb" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">制令单上料</block>
				<view slot="right" @tap="rightClick">凭证抬头</view>
			</cu-custom>
			<!-- 查询条件 -->
			<view class="fixed" :style="[{animationDelay: 0.1 + 's'}]">
				<form>
					<view class="cu-form-group last">
						<image class="icon" src="../../static/saomiao.png" mode=""></image>
						<input auto-focus placeholder="请输入规格" name="input" v-model="myFormData.materielGauge" @confirm="inputQuery"></input>
						<button class="cu-btn bg-gradual-green shadow-blur round" @click="handleScan">扫描上料</button>
					</view>
					<view class="cu-form-group last" v-if="produceGrade === 'SMT'">
						<image class="icon" src="../../static/saomiao.png" mode=""></image>
						<input auto-focus placeholder="请输入钢网" name="input" v-model="gangwang" @confirm="setGg('钢网')"></input>
						<button class="cu-btn bg-gradual-green shadow-blur round" @click="setGg('钢网')">{{isGangwang ? '修改钢网' : '绑定钢网'}}</button>
					</view>
					<view class="cu-form-group last" v-if="produceGrade === 'SMT'">
						<image class="icon" src="../../static/saomiao.png" mode=""></image>
						<input auto-focus placeholder="请输入刮刀" name="input" v-model="guadao" @confirm="setGg('刮刀')"></input>
						<button class="cu-btn bg-gradual-green shadow-blur round" @click="setGg('刮刀')">{{isGuadao ? '修改刮刀' : '绑定刮刀'}}</button>
					</view>
					<view class="cu-form-group last" style="display: flex;flex-direction: row-reverse;">
						<!-- <image class="icon" src="../../static/saomiao.png" mode=""></image> -->
						<!-- <input auto-focus placeholder="请输入规格" name="input" v-model="myFormData.materielGauge" @confirm="inputQuery"></input> -->
						<button class="cu-btn bg-gradual-green shadow-blur round" @click="scanningRefueling">扫描换料</button>
					</view>
				</form>
			</view>
			<!-- 详情 -->
			<view class="list" :style="{'marginTop':produceGrade === 'SMT' ? '400rpx' : '120rpx'}">
				<view class="cu-list menu animation-slide-bottom" v-for="(item,index) in WordListMsg" :key="index" :style="[{animationDelay: (index + 1)*0.1 + 's'}]">
					<view class="cu-item">
						<view class="content">
							<text class="text-grey headLine">料号</text>
						</view>
						<view class="action">
							<text class="text-grey headLine">{{item.materielCode}}</text>
						</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<text class="text-grey">物料名称</text>
						</view>
						<view class="action">
							<text class="text-grey">{{item.materielName}}</text>
						</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<text class="text-grey">物料规格</text>
						</view>
						<view class="action">
							<text class="text-grey">{{item.materielGauge}}</text>
						</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<text class="text-grey">提货数量</text>
						</view>
						<view class="action">
							<text class="text-grey">{{item.pickupNum}}</text>
						</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<text class="text-grey">需求数量</text>
						</view>
						<view class="action">
							<text class="text-grey">{{item.realNum}}</text>
						</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<text class="text-grey">已发料数量</text>
						</view>
						<view class="action">
							<text class="text-grey">{{item.deliveryNum}}</text>
						</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<text class="text-grey">已上料数量</text>
						</view>
						<view class="action">
							<text class="text-grey">{{item.unglazeNum}}</text>
						</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<text class="text-grey">已消耗数量</text>
						</view>
						<view class="action">
							<text class="text-grey">{{item.consumeNum}}</text>
						</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<text class="text-grey">单位</text>
						</view>
						<view class="action">
							<text class="text-grey">{{item.countUnit}}</text>
						</view>
					</view>
					<!-- <view class="cu-item">
						<view class="numName" style="background-color: #99CC00;">
							上料数量:
						</view>
						<view class="numInput">
							<input style="width: 260rpx;" type="text" v-model="preservationList[index].num" value="" placeholder="请输入上料数量" />
						</view>
					</view> -->
					<!-- <view class="cu-item"> -->
						<!-- <view class="btn1" @click="scanShipment(index,item)">上料</view> -->
						<!-- <view class="btn2" @click="FirstArticleIssue(index,item)">扫描上料</view> -->
					<!-- </view> -->
				</view>
			</view>
			<view class="none" v-if="noDataAvailable">
				<view class="none1">
					暂无数据
				</view>
			</view>
			<view class="none2" v-if="noMoreDataAvailable">
				没有更多数据
			</view>
		</scroll-view>
		<!-- 抬头凭证 输入弹窗 -->
		<template v-if="modalName=='Modal'" >
			<view class="cu-modal" :class="modalName=='Modal'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">凭证抬头</view>
						<view class="action">
							<text class="cuIcon-close text-red" @click="close"></text>
						</view>
					</view>
					<view class="padding-xl">
						<form>
							<view class="cu-form-group">
								<view class="titles">凭证日期：</view>
								<picker mode="date" :value="myModelData.cerDate" @change="cerDateChange">
									<view class="picker">
										{{myModelData.cerDate}}
									</view>
								</picker>
							</view>
							<view class="cu-form-group">
								<view class="titles">过账日期：</view>
								<picker mode="date" :value="myModelData.accountDate" @change="accountDateChange">
									<view class="picker">
										{{myModelData.accountDate}}
									</view>
								</picker>
							</view>
							<view class="cu-form-group">
								<view class="titls">类型：</view>
								<input placeholder="工号" style="text-align: right;" name="input" v-model="myModelData.affairType" disabled></input>
							</view>
							<view class="cu-form-group">
								<view class="titles">描述：</view>
								<textarea value="" placeholder="请输入描述" style="text-align: left;text-indent: 2em;" v-model="myModelData.affairContent" />
								</view>
							<view class="padding flex flex-direction">
								<button class="cu-btn lg"  @click="onSubmit">确定</button>
							</view>
						</form>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name: 'instructionSheetLoadingDetail',
		data() {
			return {
				noDataAvailable: false,
				noMoreDataAvailable: false,
				commandbillCode:'',
				gangwang:'',
				guadao:'',
				isGangwang:false,
				isGuadao:false,
				produceId: '',
				WordListMsg: [],
				modalName:'',
				myModelData:{
					cerDate:'', //凭证日期
					accountDate:'', // 过账日期
					affairType:'',
					affairContent:''
				},
				// 有一个子订单  次数数组就有几个对象 用于存储id + 发货数量
				preservationList:[],
				myFormData: {
					materielGauge: ''
				},
				pageNo:1,
				produceGrade:'', // 生产阶别
			}
		},
		onShow(e) {
			this.produceGrade = uni.getStorageSync('instructionSheetLoadingProduceGrade')
			this.commandbillCode = uni.getStorageSync('commandbillCode');
			this.produceId = uni.getStorageSync('instructionSheetLoadingProduceId');
			this.id = uni.getStorageSync('instructionSheetLoadingId');
			let data = {
				produceId: this.produceId,
				// ifGlaze:'未上料',
				commandbillId: this.id,
				materielGauge:this.myFormData.materielGauge,
				pageSize:5,
				pageNo:this.pageNo
			}
			this.WordListMsg = []
			this.listBom(data);
			// this.getProduceMesCommandbillInfoListbom();
			let date = new Date()
			this.myModelData.cerDate = date.getFullYear() + '-' +(date.getMonth() + 1) + '-' + date.getDate();
			this.myModelData.accountDate = date.getFullYear() + '-' +(date.getMonth() + 1) + '-' + date.getDate();
			this.myModelData.affairType = uni.getStorageSync('affairType');
			this.getGg()
		},
		onLoad(e) {
			uni.removeStorageSync('instructionSheetLoadingDetailRise')
		},
		onReachBottom: function() {
			let _this = this
			if (this.noDataAvailable == true || this.noMoreDataAvailable == true) {
				return
			}
			_this.pageNo++
			let data = {
				produceId: _this.produceId,
				// ifGlaze:'未上料',
				commandbillId: _this.id,
				materielGauge:_this.myFormData.materielGauge,
				pageSize:5,
				pageNo:_this.pageNo
			}
			_this.listBom(data)
		},
		methods: {
			getGg(){
				this.$http.get('/produce/bindingRecordInfo/list',{
					params:{
						commandbillCode:this.commandbillCode,
						state:'0'
					}
				}).then(res=>{
					console.log(11111)
					if(res.data.success){
						let list = res.data.result.records
						if(list.length > 0){
							list.forEach(item=>{
								item.bindingName === '钢网' ? this.isGangwang = true : this.isGuadao = true
							})
						}
					}else{
						this.modal.show({ type:'error', content:res.data.message })
					}
				})
			},
			setGg(type){
				this.$http.post('/produce/bindingRecordInfo/add',{
					commandbillCode:this.commandbillCode,
					bindingName:type,
					bindingSn:type === '钢网' ? this.gangwang : this.guadao
				}).then(res=>{
					if(res.data.success){
						this.modal.show({ type:'success', content:'绑定'+type+'成功!' })
						type === '钢网' ? (this.isGangwang = true) : (this.isGuadao = true)
					}else{
						this.modal.show({ type:'error', content:res.data.message })
					}
				})
			},
			listBom(data){
				this.noDataAvailable = false
				this.noMoreDataAvailable = false
				this.$http.get('produce/mesCommandbillPitem/list', {
					params: data
				}).then(res => {
					uni.hideLoading()
					this.myFormData.materielGauge = ''
					if (res.data.success) {
						this.WordListMsg = this.WordListMsg.concat(res.data.result.records);
						if (res.data.result.total == 0) {
							this.noDataAvailable = true;
						} else if(this.WordListMsg.length >= res.data.result.total){
							this.noMoreDataAvailable = true;
						}
						this.preservationList = []
						for (let i = 0; i < this.WordListMsg.length; i++) {
							let data = {
								id: this.WordListMsg[i].id,
								num: ''
							}
							this.preservationList.push(data)
						}
						console.log(this.WordListMsg)
					} else {
						// this.$tip.error(res.data.message)
						this.modal.show({
							type: 'error',
							content: res.data.message
						})
					}
				})
			},
			// 制造中心-获取bom-分页列表查询
			getProduceMesCommandbillInfoListbom() {
				uni.showLoading({
					mask:true,
					title:'加载中.....'
				})
				let data = {
					produceId: this.produceId,
					// ifGlaze:'未上料',
					id: this.id,
					materielGauge:this.myFormData.materielGauge
				}
				this.$http.get('produce/mesCommandbillInfo/listbom', {
					params: data
				}).then(res => {
					uni.hideLoading()
					if (res.data.success) {
						this.WordListMsg = res.data.result;
						this.preservationList = []
						for (let i = 0; i < this.WordListMsg.length; i++) {
							let data = {
								id: this.WordListMsg[i].id,
								num: ''
							}
							this.preservationList.push(data)
						}
						console.log(this.WordListMsg)
					} else {
						// this.$tip.error(res.data.message)
            this.modal.show({ type:'error', content:res.data.message,timeout:5000, })
					}
				})
			},
			// 输入框查询
			inputQuery() {
				this.pageNo = 1
				console.log(this.myFormData.materielCode)
				let data = {
					produceId: this.produceId,
					// ifGlaze:'未上料',
					commandbillId: this.id,
					materielGauge:this.myFormData.materielGauge,
					pageSize:5,
					pageNo:this.pageNo
				}
				this.WordListMsg = []
				this.listBom(data);
				// this.myFormData.materielGauge = ''

			},
			// 凭证抬头 按钮
			rightClick(){
				this.modalName = 'Modal'
			},
			// 关闭弹窗
			close(){
				this.modalName = '';
				this.myModelData.affairContent = '';
			},
			// 凭证日期
			cerDateChange(e) {
				console.log(e)
				this.myModelData.cerDate = e.detail.value
			},
			accountDateChange(e){
				this.myModelData.accountDate = e.detail.value
			},
			onSubmit(){
				if(this.myModelData.affairContent.replace(/\s+/g, "") == ''){
					// this.$tip.error('描述不能为空');
          this.modal.show({ type:'error', content:'描述不能为空' })
					return false
				}
				uni.showLoading({
					mask:true,
					title:'加载中.....'
				})
				this.$http.post('storage/mesCertificatePerk/add',this.myModelData).then( res =>{
					console.log(res)
					uni.hideLoading()
					if(res.data.success){
						uni.setStorageSync('instructionSheetLoadingDetailRise',res.data.result.id);
						// this.$tip.success(res.data.message)
            this.modal.show({ type:'success', content:res.data.message })
						this.modalName = '';
						this.myModelData.affairContent = '';
					}else {
						// this.$tip.error(res.data.message)
            this.modal.show({ type:'error', content:res.data.message })
					}
				})
			},
			// 扫描上料
			FirstArticleIssue(index,item){
				if(!uni.getStorageSync('instructionSheetLoadingDetailRise')){
					this.modalName = 'Modal'
					return false
				}
				uni.showLoading({
					mask:true,
					title:'加载中.....'
				})
				let data = {
					mobileCode:264,
					materielCode:item.materielCode,
					mobileType:'制令单扫描上料',
					perkId:uni.getStorageSync('instructionSheetLoadingDetailRise'),
					reserveCode:this.preservationList[index].id,
					inputNum:this.preservationList[index].num
				}
				// this.$http.post('storage/mesCertificatePerk/addMesCertificateItem',data).then( res =>{
				this.$http.post('storage/mesCertificatePerk/scanSendMateriel',data).then( res =>{
					uni.hideLoading()
					if(res.data.success){
						// this.getProduceMesCommandbillInfoListbom();
						this.inputQuery()
						uni.setStorageSync('instructionSheetLoadingDetailId',res.data.result.id)
						uni.setStorageSync('instructionSheetLoadingDetailBaseCode',item.commandbillId)
						uni.setStorageSync('instructionSheetLoadingDetailProductCode',item.materielCode)
						this.$Router.push({
							name: 'instructionSheetLoadingDetailSaoMiao'
						})
					}else {
						// this.$tip.error(res.data.message)
            this.modal.show({ type:'error', content:res.data.message })
					}
				})
				// this.$Router.push({
				// 	name: 'instructionSheetLoadingDetailSaoMiao'
				// })
			},
			// 扫描上料（新）
			handleScan() {
				if(!uni.getStorageSync('instructionSheetLoadingDetailRise')){
					this.modalName = 'Modal'
					return false
				}
				uni.setStorageSync('instructionSheetLoadingDetailBaseCode',this.id);
				uni.setStorageSync('instructionSheetLoadingDetailListBomRes',this.WordListMsg);
				this.$Router.push({
					name: 'instructionSheetLoadingDetailSaoMiao'
				})
			},
			// 扫描换料
			scanningRefueling(){
				if(!uni.getStorageSync('instructionSheetLoadingDetailRise')){
					this.modalName = 'Modal'
					return false
				}
				uni.setStorageSync('instructionSheetLoadingDetailBaseCode',this.id);
				uni.setStorageSync('instructionSheetLoadingDetailListBomRes',this.WordListMsg);
				this.$Router.push({
					name: 'scanningRefueling'
				})
			},
			// 上料
			scanShipment(index,item){
				if(!uni.getStorageSync('instructionSheetLoadingDetailRise')){
					this.modalName = 'Modal'
					return false
				}
				if(this.preservationList[index].num <= 0){
					// this.$tip.error('请输入上料数量')
          this.modal.show({ type:'error', content:'请输入上料数量' })
					return false
				}
				uni.showModal({
					title: '制令单上料',
					content: '请确认是否上料!',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								mask:true,
								title:'加载中.....'
							})
							let data = {
								mobileCode:263,
								materielCode:item.materielCode,
								mobileType:'制令单上料',
								perkId:uni.getStorageSync('instructionSheetLoadingDetailRise'),
								reserveCode:this.preservationList[index].id,
								inputNum:this.preservationList[index].num,
								query5: item.commandbillId
							}
							// this.$http.post('storage/mesCertificatePerk/addMesCertificateItem',data).then( res =>{
							this.$http.post('storage/mesCertificatePerk/addGlazeMateriel',data).then( res =>{
								uni.hideLoading()
								if(res.data.success){
									this.inputQuery()
									// this.getProduceMesCommandbillInfoListbom();
									// uni.setStorageSync('instructionSheetLoadingDetailId',res.data.result.id)
									// this.$Router.push({
									// 	name: 'instructionSheetLoadingDetailSaoMiao'
									// })
								}else {
									// this.$tip.error(res.data.message)
                  this.modal.show({ type:'error', content:res.data.message })
								}
							})
						}
					}
				})
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f1f1f1;
		.fixed {
				position: fixed;
				z-index: 1;
				width: 100%;
				background-color: white;
				// height: 300rpx;
				border-bottom: 1rpx solid #eee;

				.last {
					border-bottom: 1rpx solid #eee;
					position: relative;

					.icon {
						width: 30rpx;
						height: 29rpx;
						position: absolute;
						top: 36rpx;
						left: 60rpx;
					}

					input {
						width: 686rpx;
						height: 68rpx;
						background: #FFFFFF;
						border: 1px solid #D5D8DF;
						border-radius: 34px;
						padding-left: 79rpx;
					}
				}
			}
		.list{

			.action {
				width: 70%;
				text-align: right;
				word-break: break-all;
			}
		}
		.round {
			margin-left: 20rpx;
		}
	}

	.remark {
		width: 90% !important;
	}

	.title {
		font-weight: bold;
		padding: 10rpx;
		border-radius: 10rpx;
		color: white;
	}

	input {
		border: 2rpx solid #F0F0F0;
		height: 60rpx;
		padding: 10rpx;
		border-radius: 10rpx;
		font-size: 20rpx;
	}

	.btn1,
	.btn2 {
		width: 30%;
		color: white;
		border-radius: 30rpx;
		padding: 10rpx 20rpx;
		text-align: center;
	}

	.btn1 {
		background-image: radial-gradient(circle, #3F55E9, #5F71ED, #7D8CF0);
	}

	.btn2 {
		background-image: radial-gradient(circle, #716BA9, #362D85, #57509A);
	}
	.numName{
		font-weight: bold;
		padding: 10rpx;
		border-radius: 10rpx;
		color: white;
	}
	.headLine{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #191919;
		line-height: 50rpx;
	}
	.cu-btn{
		background-image: radial-gradient(circle, #3F55E9, #5F71ED, #7D8CF0);
		color: white;
	}
	.none .none1 {
		font-size: 30rpx;
		text-align: center;
		margin-top: 50rpx;
		color: #999999;
	}

	.none2 {
		font-size: 30rpx;
		text-align: center;
		margin-top: 50rpx;
		color: #999999;
	}
</style>
